<template>
	<div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import type { PropType } from 'vue';
// import { seriesDataType } from '../data';
import { productClassification } from '/@/api/analysis/index';

defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

// 产品分类占比
const getProducts = () => {
	productClassification().then((res) => {
		let count = 0;
		const originalData = res.data.map((d: { productName: string; productCount: string }) => {
			count += parseInt(d.productCount);
			return {
				name: d.productName,
				value: d.productCount,
			};
		});

		setOptions({
			title: {
				text: `${count}`,
				textAlign: 'center',
				show: false,
				top: '40%',
				left: '30%',
				textStyle: {
					fontSize: 18,
					fontWeight: 700,
					color: '#000',
				},
			},
			tooltip: {
				trigger: 'item',
				position: 'right',
				formatter: '{b}: {d}%<br /> {c}',
			},
			legend: {
				type: 'scroll',
				orient: 'vertical',
				align: 'right',
				itemWidth: 10,
				show: true,
				bottom: '0',
				right: 0,
				pageIconSize: 8,
				textStyle: {
					fontSize: 10,
				},
			},
			grid: { left: 10, top: 20, bottom: 20, right: 10, containLabel: true },
			series: [
				{
					type: 'pie',
					z: 999,
					radius: ['50%', '70%'],
					center: ['30%', '45%'],
					minAngle: 2,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1,
					},
					label: {
						show: false,
						formatter: '{c}\n{d}%',
					},
					data: originalData,
					labelLine: {
						show: false,
					},
					animationType: 'scale',
					animationEasing: 'exponentialInOut',
					animationDelay: function () {
						return Math.random() * 400;
					},
				},
			],
		});
	});
};
onMounted(() => {
	getProducts();
});
</script>
